<template>
  <com-card>
    <div slot="com_header">
      <el-row>
        <el-col :span="8">
          <el-input
            placeholder="请输入查询内容"
            v-model="ordersObj.query"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="query()"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>
    </div>
    <div slot="com_content">
      <el-row>
        <el-table :data="tableData" border>
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="order_number" label="订单编号" width="300px">
          </el-table-column>
          <el-table-column prop="order_price" label="订单价格">
          </el-table-column>
          <el-table-column prop="order_pay" label="是否付款">
            <template #default="{ row }">
              <el-tag
                :type="
                  row.order_pay == '0'
                    ? 'danger'
                    : row.order_pay == '1'
                    ? ''
                    : row.order_pay == '2'
                    ? 'success'
                    : 'warning'
                "
                >{{
                  (a =
                    row.order_pay == "0"
                      ? "未支付"
                      : row.order_pay == "1"
                      ? "支付宝支付"
                      : row.order_pay == "2"
                      ? "微信支付"
                      : "银行卡支付")
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="is_send" label="是否发货"> </el-table-column>
          <el-table-column label="下单时间">
            <template #default="{ row }">
              {{ row.update_time | timeMf }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button
                size="small"
                type="primary"
                icon="el-icon-edit"
                @click="add(row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="ordersObj.pagenum"
        :page-sizes="[5, 7, 9, 11]"
        :page-size="ordersObj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 编辑弹窗 -->
      <el-dialog title="订单编辑" :visible.sync="dialogbj" width="30%">
        <div>
          <el-form :model="xgobj" label-width="100px">
            <el-form-item label="订单 ID">
              <el-input v-model="xgobj.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="订单是否发货">
              <template>
                <el-radio v-model="xgobj.is_send" label="1">已发货</el-radio>
                <el-radio v-model="xgobj.is_send" label="0">未发货</el-radio>
              </template>
            </el-form-item>
            <el-form-item label="订单支付">
              <div style="margin: 0 20px">
                <el-radio v-model="xgobj.order_pay" label="0" border size="mini"
                  >未支付</el-radio
                >
                <el-radio v-model="xgobj.order_pay" label="1" border size="mini"
                  >支付宝支付</el-radio
                >
                <el-radio v-model="xgobj.order_pay" label="2" border size="mini"
                  >微信支付</el-radio
                >
                <el-radio v-model="xgobj.order_pay" label="3" size="mini" border
                  >银行卡支付</el-radio
                >
              </div>
            </el-form-item>
            <el-form-item label="订单价格">
              <el-input v-model="xgobj.order_price"> </el-input>
            </el-form-item>
            <el-form-item label="订单数量">
              <el-input v-model="xgobj.order_number"></el-input>
            </el-form-item>
            <el-form-item label="支付状态">
              <template>
                <el-radio v-model="xgobj.pay_status" label="1">已支付</el-radio>
                <el-radio v-model="xgobj.pay_status" label="0">未支付</el-radio>
              </template>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogbj = false">取 消</el-button>
          <el-button type="primary" @click="ddsure">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 查看 -->
      <el-dialog title="提示" :visible.sync="dialogck" width="30%">
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogck = false">取 消</el-button>
          <el-button type="primary" @click="dialogck = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </com-card>
</template>

<script>
import ComCard from "../../components/comCard";
import { api_orders, api_add, api_kuaidi } from "../../api/orders.js";
export default {
  components: {
    ComCard,
  },
  data() {
    return {
      ordersObj: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      //总数据列表
      tableData: [],
      total: 0,
      //修改弹窗
      dialogbj: false,
      xgobj: {},
      //查看弹窗
      dialogck: false,
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    //编辑
    add(row) {
      this.dialogbj = true;
      let id = row.order_id;
      let { is_send, order_pay, order_price, order_number, pay_status } = row;
      if (is_send == "否") {
        is_send = "0";
      } else {
        is_send = "1";
      }
      this.xgobj = {
        id,
        is_send,
        order_pay,
        order_price,
        order_number,
        pay_status,
      };
    },
    async ddsure() {
      this.dialogbj = false;
      console.log(this.xgobj);
      let rst = await api_add(this.xgobj);
      console.log(rst);
      if (rst.meta.status == 201) {
        this.$message.success(rst.meta.msg);
        this.query();
      } else {
        this.$message.error(rst.meta.msg);
      }
    },

    //查询
    async query() {
      let rst = await api_orders(this.ordersObj);
      let { total, goods } = rst.data;
      this.total = total;
      this.tableData = goods;
      console.log(rst);
    },
    //条目下拉框
    handleSizeChange(pagesize) {
      this.ordersObj.pagesize = pagesize;
      this.query();
    },
    //页码
    handleCurrentChange(pagenum) {
      this.ordersObj.pagenum = pagenum;
      this.query();
    },
  },
};
</script>

<style lang="less" scoped>
</style>